<template>
	<view class="content">
		<view class="ed-body">
			<view class="order-header">
				<view class="order-de">
					<view>订单编号：</view>
					<view class="order-val">201712201507</view>
				</view>
				<view class="order-de"> 
					<view>下单时间：</view>
					<view class="order-val">2017-12-30 15:07:23</view>
				</view>
				<view class="order-de">
					<view>物流方式：</view>
					<view class="order-val">商家配送</view>
				</view>
			</view>
			<view class="order-logistics">
				<view class="order-logistics-details">
					<view class="logistics-list">
						<image src="/static/home/icon/logistics_shouhuodizhi.png"></image>
						<view>
							【收货地址】广州省东莞市万江街道滨海公馆7栋2单元1103号
						</view>
						<view class="logistics-time">2019-09-10 09:26:32</view>
					</view>
				</view>
				<view class="order-logistics-details">
					<view class="logistics-list">
						<image src="/static/home/icon/logistics_daiqujian.png"></image>
						<view class="text_ bold_">待取件</view>
						<view>
							【收货地址】广州省东莞市万江街道滨海公馆7栋2单元1103号
						</view>
						<view class="logistics-time">2019-09-10 09:26:32</view>
						<view class="sign-for">我已签收</view>
					</view>
				</view>
				<view class="order-logistics-details">
					<view class="logistics-list">
						<image src="/static/home/icon/logistics_paisonzho.png"></image>
						<view class="text_">派送中</view>
						<view>
							【收货地址】广州省东莞市万江街道滨海公馆7栋2单元1103号
						</view>
						<view class="logistics-time">2019-09-10 09:26:32</view>
					</view>
				</view>
				<view class="order-logistics-details">
					<view class="logistics-list">
						<image src="/static/home/icon/logistics_yunshuzho.png"></image>
						<view class="text_">运输中</view>
						<view>
							【收货地址】广州省东莞市万江街道滨海公馆7栋2单元1103号
						</view>
						<view class="logistics-time">2019-09-10 09:26:32</view>
					</view>
				</view>
				<view class="order-logistics-details">
					<view class="logistics-list">
						<image class="bottom_"></image>
						<view>
							【收货地址】广州省东莞市万江街道滨海公馆7栋2单元1103号
						</view>
						<view class="logistics-time">2019-09-10 09:26:32</view>
					</view>
				</view>
			</view>
			</view>
			<view class="ed-none" v-if="false">
				暂无物流信息
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data () {
		return {
			add: '', // 收货地址
			express: {}, // 快递物流信息
		}
	},
}	
</script>

<style lang="less">
.ed-head{
	font-size: 30upx;
	padding: 20upx 26upx;
}
.ed-body{
	// margin: 0 26upx;
	// background-color: #fff;
	// box-shadow: 0 0 20upx #ccc;
	.order-header {
		width:686rpx;
		height:204rpx;
		background:rgba(255,255,255,1);
		border-radius:16rpx;
		margin:32rpx auto 24rpx auto;
		padding:24rpx 0 0 32rpx;
		.order-de {
			display:flex;
			padding-bottom:23rpx;
			font-size:26rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(128,128,128,1);
			.order-val {
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
			}
		}
	}
	.order-logistics {
		width:686rpx;
		background:rgba(255,255,255,1);
		border-radius:16rpx;
		margin:0rpx auto 24rpx auto;
		padding:32rpx;
		.order-logistics-details {
			position: relative;
			.logistics-list {
				margin-left:14rpx;
				border-left:1px solid rgba(240,240,240,1);
				padding-bottom:54rpx;
				.text_ {
					margin:0 0 16rpx 10rpx;
					font-size:28rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					color:rgba(128,128,128,1);
				}
				.bold_ {
					color:rgba(51,51,51,1);
				}
				.bottom_ {
					width:12rpx;
					height:12rpx;
					border-radius:50%;
					left:9rpx;
					background:rgba(216,216,216,1);

				}
				image {
					position: absolute;
					left:0;
					width: 32rpx;
					height: 32rpx;
				}
				view {
					padding-left:32rpx;
					font-size:24rpx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(128,128,128,1);
				}
				.logistics-time {
					font-size:22rpx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					margin-top:18rpx;
					color:rgba(179,179,179,1);
				}
				.sign-for {
					margin-top:20rpx;
					padding-left:40rpx;
					width:184rpx;
					line-height: 62rpx;
					// text-align:center;
					border-radius:34px;
					border:1px solid rgba(255,94,77,0.4);
					color:#FF5E4D
				}
			}
		}
	
	}
}
.ed-body-item{
	overflow: hidden;
	position: relative;	
}
.edbi-left{
	display: inline-block;
	width: 96upx;
	float: left;
	padding: 4upx 0;
}
.edbi-date{
	font-size: 26upx;
}
.edbi-time{
	font-size: 24upx;
}
.edbi-circle{
	display: inline-block;
	width: 18upx;
	height: 18upx;
	border: 2upx solid #ccc;
	border-radius: 50%;
	position: absolute;
	left: 88upx;
	top: 12upx;
	background-color: #fff;
	z-index: 99;
}
.last-circle{
	width: 40upx;
	height: 40upx;
	font-size: 24upx;
	left: 78upx;
	text-align: center;
	line-height: 40upx;
	color: #fff;
	background-color: #FF7159;
	border: none;
	top: 0;
}
.edbi-right{
	display: inline-block;
	width: 550upx;
	float: right;
	border-left: 2upx solid #e8e8e8;
	padding-left: 30upx;
	position: relative;
	padding-bottom: 30upx;
}
.edbi-title{
	font-size: 30upx;
}
.edbi-content{
	font-size: 26upx;
	margin-top: 4upx;
}
.ed-none{
	text-align: center;
	font-size: 26upx;
	color: #666;
	padding: 100upx;
}
</style>
